<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户列表 - BsAdmin后台模板 - 经典版演示</title>
</head>
<body>
<div id="app" class="d-flex">
    <jsp:include page="/left.jsp"></jsp:include>
    <main>
        <header>
            <a href="http://www.qadmin.net" target="_blank">网站首页</a>
            <div class="dropdown float-right">
                <button class="btn  btn-sm  dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <svg width="20" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-smile-fill rounded-circle"
                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c.552 0 1-.672 1-1.5S10.552 5 10 5s-1 .672-1 1.5S9.448 8 10 8z"/>
                    </svg>
                    <!--可以使用图片,大小20,class='rounded-circle'-->
                    BsAdmin
                </button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
                    <a class="dropdown-item" href="repwd.html">修改密码</a>
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/LogoutServlet">退出登录</a>
                </div>
            </div>
        </header>
        <div id="body">
            <main>
                <div class="main">
                    <div class="search">
                        <form class="form-inline float-left" action="" method="get">
                            <div class="form-group">
                                <input type="text" id="key" name="key" value="" class="form-control"
                                       placeholder="手机号/昵称/UID">
                            </div>
                            <button type="button" id="searchBtn" class="btn btn-primary"><i class="iconfont"></i>搜索
                            </button>
                        </form>
                        <a class="btn btn-primary float-right" href="user_create.jsp"><i class="iconfont"></i>新增</a>
                    </div>
                    <div class="table-box">
                        <table id="tb1" class="table">
                        </table>
                    </div>
                    <div class="page">
                        <span class="total float-left page-link">共23223条</span>
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="#">&lt;&lt;</a></li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">&gt;&gt;</a></li>
                        </ul>
                    </div>
                </div>
            </main>
        </div>
    </main>
</div>
</body>
<script>
    function load(petName) {
        var str = '<thead><tr><th scope="col">ID</th>' +
            '<th scope="col">ID</th><th scope="col">名称</th>' +
            '<th scope="col">性别</th>' +
            '<th scope="col">操作</th></tr></thead>';
        $.ajax({
            "url": "/PetManage_war_exploded/PetListServlet",
            "data": {petName: petName},
            "type": "get",
            "dataType": "json",
            "success": function (data) {
                $(data).each(function (index, ele) {
                    str += '<tbody>' +
                        '<tr><th scope="row">' + this.petId + '</th>' +
                        '<td>' + this.petName + '</td><td>' + this.petBreed + '</td>' +
                        '<td class="update" petid="' + this.petId + '" title="' + this.petSex + '">' + this.petSex + '</td>' +
                        '<td><a href="#">修改</a>' +
                        '<a class="del" pid= title="' + this.petId + '" href="#">删除</a>' +
                        '</td></tr>' +
                        '</tbody>';
                })
                $("#tb1").html(str);
            }
        })
    }

    $("#searchBtn").click(function () {
        var key = $("#key").val();
        load(key);
    })
    load('');

    //绑定点击事件,ajax删除
    $(document).on("click", ".del", function () {
        //查看当前鼠标点击的对象
        console.log((this));
        //通过attr方法可以获取标签的相关属性
        var id = $(this).attr('title');
        $.ajax({
            "url": "/PetManage_war_exploded/DeletePetByIdServlet",
            "data": {id: id},
            "type": "get",
            "dataType": "text",
            "success": function (data) {
                if (data > 0) {
                    $(this).parents("tr").remove();
                }
            }
        })
    })

    //绑定修改单击事件
    $(document).on("click", ".update", function () {
        var petid = $(this).attr("petid");
        var title = $(this).attr("title");
        var $this = $(this);
        $.ajax({
            "url": "/PetManage_war_exploded/UpdatePetSexServlet",
            "data": {id: petid, sex: title},
            "type": "get",
            "dataType": "text",
            "success": function (data) {
                if(data>0){
                    if(title=="雄"){
                        $this.attr("title","雌");
                        $this.html("雌");
                    }else if(title=="雌") {
                        $this.attr("title","雄");
                        $this.html("雄");
                    }
                }
            }
        })
    })
</script>
</html>
